import React, { useState, useEffect } from 'react';
import { obj_empty, is_empty, obj_str, getClientW } from 'sui';

const CenterView = ({ children, className }) => (
    <div className="h-screen text-white bg-blue-800">
        <div className={"container mx-auto h-full flex justify-center items-center " + className}>
            {children}
        </div>
    </div>
);

const W_DIFF = 2;

const FitWidth = ({ className, children, sideopen, w=0 }) => {
    const [width, setWidth] = useState(getClientW(sideopen) - W_DIFF - w);

    useEffect(() => {
        const onResize = () => {
            const w = getClientW(sideopen);
            setWidth(w - W_DIFF);
        }

        window.addEventListener('resize', onResize)

        return () => window.removeEventListener('resize', onResize);
    }, [sideopen]);

    return (
        <div style={{ width: width }} className={className}>
            {children}
        </div>
    );
};

const Info = ({ data, col, className, hl }) => {
    if (obj_empty(data) || is_empty(col)) {
        return null;
    }

    const getItem = () => col.map(d => {
        const sn = obj_str(d, "sn");
        const name = obj_str(d, "name");

        let st = "";
        if (hl) {
            if (hl.find(t => t === sn)) {
                st = "bg-indigo-200";
            }
        }

        return (
            <div className="table-row" key={sn}>
                <div className={"py-1 text-right table-cell " + st}>{name}</div>
                <div className={"px-6 py-1 table-cell " + st}>{obj_str(data, sn)}</div>
            </div>
        );
    });

    return (
        <div className={className}>
            <div className="my-2 table">
                {getItem()}
            </div>
        </div>
    );
};

export {Info, FitWidth, CenterView};
